Image Size and Resolution

hr.icon

iOSが画面上にコンテンツを配置する際に使用する座標系は、ディスプレイ上のピクセルに対応するポイントの測定値に基づいています。

標準解像度のディスプレイは、ピクセル密度が1:1（または@1x）で、1ピクセルが1ポイントに相当します。

高解像度のディスプレイは、より高いピクセル密度を持ち、2.0または3.0のスケールファクター（@2xおよび@3xと呼ばれる）を提供する。

そのため、高解像度のディスプレイでは、より多くの画素数の画像が求められる。

https://gyazo.com/63f6890ad136d938d0fb3669e568e3e9

例えば、100px×100pxの標準解像度（@1x）の画像があったとします。

この画像を@2倍にすると200px×200px、@3倍にすると300px×300pxになります。

アプリ内のすべてのアートワークに、アプリがサポートするすべてのデバイス用の高解像度画像を提供します。

デバイスに応じて、各画像のピクセル数に特定のスケールファクターを乗じることで実現します。

table: Device - Scale Factor

Device Scale Factor

12.9" iPad Pro @2x

11" iPad Pro @2x

10.5" iPad Pro @2x

9.7" iPad @2x

7.9" iPad mini 4 @2x

iPhone XS Max @3x

iPhone XS @3x

iPhone XR @2x

iPhone X @3x

iPhone 8 Plus @3x

iPhone 8 @2x

iPhone 7 Plus @3x

iPhone 7 @2x

iPhone 6s Plus @3x

iPhone 6s @2x

iPhone SE @2x

Designing High-Resolution Artwork（高解像度のアートワークをデザインする）

8px×8pxのグリッドを使用する。

グリッドを使用することで、線がシャープに保たれ、どのサイズでもコンテンツができるだけ鮮明になるため、レタッチやシャープネス処理が少なくて済みます。

画像の境界線をグリッドに合わせてスナップすることで、縮小時に発生するハーフピクセルや細部のぼやけを最小限に抑えることができます。

アートワークは適切なフォーマットで作成する。

一般的に、ビットマップ/ラスターアートワークには、デインターレースされたPNGファイルを使用します。

PNGは透明度をサポートしており、可逆圧縮のため、重要なディテールがぼやけたり、色が変わったりすることがありません。

陰影、テクスチャ、ハイライトなどの効果を必要とする複雑なアートワークに適しています。

写真にはJPEGを使用してください。

JPEGの圧縮アルゴリズムは通常、ロスレスフォーマットよりも小さいサイズを生成し、写真ではアーチファクトが見分けにくくなります。

ただし、フォトリアリスティックなアプリアイコンは、PNGが最適です。

グリフなどのフラットなベクターアートで高解像度のスケーリングが必要な場合は、PDFを使用します。

完全な24ビットカラーを必要としないPNG画像には、8ビットカラーパレットを使用してください。

8ビットのカラーパレットを使うと、画質を落とさずにファイルサイズを小さくすることができます。

このパレットは写真には適していません。

JPEGファイルを最適化して、サイズと画質のバランスをとることができます。

ほとんどのJPEGファイルは、画像を劣化させることなく圧縮することができます。

少量の圧縮でも、ディスクスペースを大幅に節約できます。

各画像の圧縮設定を試して、納得のいく結果が得られる最適な値を見つけてください。

画像やアイコンに代替テキストラベルを表示する。

代替テキストラベルは画面上には表示されませんが、VoiceOverが画面上の内容を音声で説明することで、視覚障害者の方のナビゲーションを容易にします。